<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>markdown genertor</title>
<script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/webjars/layui/layui.js}"></script>
<link rel="stylesheet" th:href="@{/webjars/layui/css/layui.css}" />
</head>
<body>
<div class="layui-main site-inline">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend>database-markdown-generator</legend>
	</fieldset>
	<blockquote class="layui-elem-quote">数据库表结构设计 markdown 文档 生成器</blockquote>
	
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	  <legend>database config</legend>
	</fieldset>
	
	<form class="layui-form" lay-filter="formFilter" action="">
		<div class="layui-form-item">
			<label class="layui-form-label">driver</label>
			<div class="layui-input-block">
				<select name="driver" lay-filter="driverFilter" lay-verify="required">
			        <option value="com.mysql.cj.jdbc.Driver">com.mysql.cj.jdbc.Driver</option>
			        <option value="com.mysql.jdbc.Driver">com.mysql.jdbc.Driver</option>
			     </select>
			</div>
		</div>
		<div class="layui-form-item">
            <label class="layui-form-label">ip</label>
            <div class="layui-input-block">
                <input type="text" name="ip" id="ipId" lay-verify="required" autocomplete="off" placeholder="请输入ip" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">port</label>
            <div class="layui-input-block">
                <input type="text" name="port" id="portId" lay-verify="required|number" autocomplete="off" placeholder="请输入port" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">schema</label>
            <div class="layui-input-block">
                <input type="text" name="schema" id="schemaId" lay-verify="required" autocomplete="off" placeholder="请输入schema" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">username</label>
            <div class="layui-inline">
                <input type="text" name="userName" id="userNameId" lay-verify="required" autocomplete="off" placeholder="请输入username" class="layui-input">
            </div>
            <div class="layui-inline">
            <label class="layui-form-label">password</label>
            <div class="layui-inline">
                <input type="password" name="passWord" id="passWordId" lay-verify="required" autocomplete="off" placeholder="请输入password" class="layui-input">
            </div>
            </div>
        </div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitFilter">生成</button>
				<button type="button" class="layui-btn layui-btn-primary" id="resetBtnId">重置</button>
			</div>
		</div>
	</form>
	
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	  <legend>generate markdown</legend>
	</fieldset>
	
	<div class="layui-form-item">
        <label class="layui-form-label">MySQL 版本</label>
	    <div class="layui-inline">
	       <input type="text" id="databaseProductVersionId" class="layui-input" readonly="readonly">
	    </div>
	    <div class="layui-inline">
            <button type="button" class="layui-btn layui-btn-disabled" id="copyBtnId">复制下方文本</button>
        </div>
	</div>
	<div class="layui-form-item">
         <label class="layui-form-label">MD 文本</label>
         <div class="layui-input-block">
             <textarea class="layui-textarea" rows="30" id="markdownId" readonly="readonly" onblur="checkIsEmpty();"></textarea>
         </div>
    </div>
</div>
     
<script>
	layui.use(['form', 'layedit'], function(){
	  var form = layui.form
	  ,layer = layui.layer
	  ,layedit = layui.layedit
	  
	  form.val("formFilter", {
		  "ip": "127.0.0.1",
		  "port": 3306
	  });
	  
	  form.on('submit(submitFilter)', function(data){
		  $("#markdownId").val('');
		  $("#copyBtnId").attr('disabled', false);
		  $("#copyBtnId").addClass('layui-btn layui-btn-disabled');
		  var index =layer.load(2, { shade: [0.1,'#fff'] });
		  $.ajax({
		        url:'/generate',
		        type:'post',
		        dataType:'json',
		        contentType:"application/json",
		        async:true,
		        cache:false,
		        data:JSON.stringify(data.field),
		        
		        success:function(data) {
		        	if(data.success) {
		        		layer.close(index);
		        		$("#databaseProductVersionId").val(data.databaseProductVersion);
		        		$("#markdownId").val(data.mdString);
		        		$("#copyBtnId").removeClass('layui-btn-disabled');
		        		layer.tips('生成成功', '#markdownId', {
	        			   tips: [2, '#009688'],
	        			   time: 1000
	        			});
		        	} else {
		        		layer.close(index);
		        		layer.msg(data.errorMsg, {icon: 5});
		        	}
		        },
		        
		        error:function(data) {
		        	layer.close(index);
		        	layer.msg(data.errorMsg, {icon: 5});
		        }
		    });
		  return false;
	  });
	  
	});
	
	function checkIsEmpty() {
		if (!$("#markdownId").val().replace(/ +/g, "").replace(/[\r\n]/g, "")) {
			$("#copyBtnId").addClass('layui-btn layui-btn-disabled');
		} else {
			$("#copyBtnId").removeClass('layui-btn-disabled');
		}
	}
	
	$("#resetBtnId").click(function() {
		$("#ipId").val('127.0.0.1');
		$("#portId").val('3306');
		$("#schemaId").val('');
		$("#userNameId").val('');
		$("#passWordId").val('');
		$("#databaseProductVersionId").val('');
		$("#markdownId").val('');
	    $("#copyBtnId").addClass('layui-btn layui-btn-disabled');
	})
	
	$("#copyBtnId").click(function() {
		layui.use(['form'], function(){
			var layer = layui.layer
	        var copyText = $("#markdownId");
	        copyText.select();
	        document.execCommand("Copy");
	        layer.msg('复制成功', {
	        	  time: 500 
	        });
		});
    })
	
</script>
</body>
</html>